<template>
	<div id="teacherLessonRankByTime" class="teacherLessonRankByTime">
		<div style="text-align: center; margin-bottom: 10px;">
			<x-button mini @click.native="goPre"> 《 </x-button>
			<x-button mini @click.native="goCur"> 本{{unit}} </x-button>
			<x-button mini @click.native="goNext"> 》 </x-button>
		</div>

		<x-table full-bordered style="background-color:#fff;">
			<thead>
			<tr class="teacherRankTable">
				<th>姓名</th>
				<th>消课</th>
				<th>课时</th>
				<th>试听</th>
			</tr>
			</thead>
			<tbody>
			<tr v-for="item in itemList">
				<td>{{item.nickname.substring(0,4)}}</td>
				<td>{{item.totalPoints}}</td>
				<td>{{item.totalLessons}}</td>
				<td>{{item.demoClass}}</td>
			</tr>
			</tbody>
		</x-table>
	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import dateutils from '@/utils/date'
	import NetWorking from '../../../../utils/networking'
	import {XTable, XButton} from 'vux'
	export default {
		name: "teacher-lesson-rank",
		props: ['type'],
		components: {
			XTable,
			XButton
		},
		data() {
			return {
				itemList: [],
				curDate: '',
				date: '',
				unit: '',
				dateRange: ''
			}
		},
		watch: {
			type: function() {
				this.setUnit()
				this.curDate = new Date()
				let date = dateutils.getDate(this.curDate)
				this.fetchData(this.type, date)
			},
			curDate: function () {

				if(this.type == 0){
					this.dateRange = dateutils.getDate(this.curDate)
					bus.$emit("setTopSimpleTitle", '日排名（' + this.dateRange + '）')
				}else if(this.type == 1){
					this.dateRange = dateutils.getDate(dateutils.getMondayDateOfWeek(this.curDate)) + '~' + dateutils.getDate(dateutils.getSundayDateOfWeek(this.curDate))
					bus.$emit("setTopSimpleTitle", '周排名（' + this.dateRange + '）')
				}else if(this.type == 2){
					this.dateRange = dateutils.getYYMM(this.curDate)
					bus.$emit("setTopSimpleTitle", '月排名（' + this.dateRange + '）')
				}


			}
		},
		created: function () {
			bus.$emit("userDefinedEvent", 2)
			bus.$emit("barController", 1)

			this.setUnit()
			this.curDate = new Date()
			let date = dateutils.getDate(this.curDate)
			this.fetchData(this.type, date)
		},
		methods: {
			setUnit: function () {
				switch (this.type){
					case "0":
						this.unit = '日'
						break
					case "1":
						this.unit = '周'
						break
					case "2":
						this.unit = '月'
						break
					default:
						this.unit = '日'
						break
				}
			},
			goPre: function () {
				switch (this.type){
					case "0":
						this.date = dateutils.getPreDayDate(this.curDate)
						break
					case "1":
						this.date = dateutils.getPreWeekDate(this.curDate)
						break
					case "2":
						this.date = dateutils.getPreMonthDate(this.curDate)
						break
					default:
						break
				}

				this.curDate = dateutils.convertDateFromString(this.date)
				this.fetchData(this.type, this.date)
			},
			goNext: function () {
				switch (this.type){
					case "0":
						this.date = dateutils.getNextDayDate(this.curDate)
						break
					case "1":
						this.date = dateutils.getNextWeekDate(this.curDate)
						break
					case "2":
						this.date = dateutils.getNextMonthDate(this.curDate)
						break
					default:
						break
				}

				this.curDate = dateutils.convertDateFromString(this.date)
				this.fetchData(this.type, this.date)
			},
			goCur: function () {
				this.date = dateutils.getYYMMDD(new Date())
				this.curDate = dateutils.convertDateFromString(this.date)
				this.fetchData(this.type, this.date)
			},
			fetchData: function (type, date) {
				this.itemList = []

				let _this = this
				NetWorking.doGet(
					'ai/getTeacherCompleteLessonNumber',
					null,
					{
						params: {
							type: this.type,
							date: date
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.itemList = rs.teacher_rank_list
						}else{
							alert(rs.error_message)
						}
					}
				)
			}
		}
	}
</script>

<style scoped>
	.teacherLessonRankByTime{
		margin-bottom: 100px;
	}

	.teacherRankTable {
		background: #fffde2;
		color: black;
	}
</style>